<template>
  <div class="playerCebtent">
    <div class="playerCebtent_top">
      <div class="playerCebtent_top_centent">{{ catalog }}</div>
    </div>
    <div class="playerCebtentBox">
      <div class="playerCebtentBoxLeft">
        <video-player
          :masterUrlRef="masterUrlRef"
          :watchtime="watchtime"
          @videoEnded="videoEnded"
        ></video-player>
        <div class="playerCebtentBoxLeftBottom">
          <p>55 播放</p>
        </div>
      </div>
      <div class="playerCebtentBoxRight">
        <h1>选集</h1>
        <div class="courseCatalogue">
          <div
            class="item"
            v-for="(item, index) in courseList"
            :key="item.id"
            :class="{ active: catalogId == item.courseCatalog.id }"
          >
            <div class="tryAndSee" v-show="index == 0">试看</div>
            <div class="number" v-show="index != 0">课时{{ item.courseCatalog.sortno }}</div>
            <div class="title" @click="selectCebtent(item.courseCatalog.id, item)">
              {{ item.courseCatalog.sortno }}.{{ item.courseCatalog.catalog }}
            </div>
            <p class="time">{{ item.Totaltime | formatTime }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import VideoPlayer from './components/HlsVideoPlayer.vue'
import { getCatalog } from '@/api/index'
import { base } from '@/utils/index'
import { filtersFormatTime } from '@/utils/filters'
export default {
  components: { VideoPlayer },
  data() {
    return {
      catalog: '2.官封弼马温', //课程标题
      catalogId: '2', //视频播放
      courseId: '101', //课程目录
      watchtime: 0,
      masterUrlRef: '',
      courseList: null
    }
  },
  filters: {
    // 将秒钟转成分钟形式
    formatTime: function (value) {
      return filtersFormatTime(value)
    }
  },
  mounted() {
    localStorage.getItem('watchtime') ? (this.watchtime = localStorage.getItem('watchtime')) : 0
    // this.courseId = localStorage.getItem('courseId')
    // localStorage.getItem('catalogId')
    //   ? (this.catalogId = localStorage.getItem('catalogId'))
    //   : (this.catalogId = 1)
    this.masterUrlRef = base + `/api/course/playbacks/${this.catalogId}/master.m3u8`
    this.getCatalog()
  },
  methods: {
    // 获取课程目录
    async getCatalog() {
      let params = {
        courseId: this.courseId
      }
      let res = await getCatalog(params)
      this.courseList = res.data.catalogDetails
      for (let i = 0; i < this.courseList.length; i++) {
        if (this.catalogId == this.courseList[i].courseCatalog.id) {
          this.catalog =
            this.courseList[i].courseCatalog.sortno + this.courseList[i].courseCatalog.catalog
        }
      }
    },
    // 视频播放结束,自动播放下一集
    videoEnded(e) {
      for (let i = 0; i < this.courseList.length; i++) {
        if (e == this.courseList[i].courseCatalog.id) {
          if (i + 1 == this.courseList.length) return console.log('播放结束了')
          this.selectCebtent(this.courseList[i + 1].courseCatalog.id, this.courseList[i + 1])
        }
      }
    },
    selectCebtent(catalogId, item) {
      this.catalogId = catalogId
      this.catalog = item.courseCatalog.sortno + item.courseCatalog.catalog
      localStorage.setItem('catalogId', catalogId)
      this.watchtime = item.watchtime
      localStorage.setItem('watchtime', item.watchtime)
      this.masterUrlRef = base + `/api/course/playbacks/${catalogId}/master.m3u8`
    }
  }
}
</script>

<style lang="scss">
.playerCebtent {
  width: 10rem;
  background: #222;
  padding-bottom: 0.1302rem;
  .playerCebtent_top {
    width: 100%;
    .playerCebtent_top_centent {
      display: flex;
      align-items: center;
      width: 8.4375rem;
      height: 100%;
      margin: 0 auto;
      font-size: 0.1354rem;
      font-weight: 700;
      color: #fff;
      height: 0.3646rem;
    }
  }
  .playerCebtentBox {
    position: relative;
    display: flex;
    margin: 0 auto;
    width: 8.4375rem;
    background: #fff;

    .playerCebtentBoxLeft {
      display: flex;
      flex-direction: column;
      width: 72%;
      height: 100%;
      background: #000;
      .playerCebtentBoxLeftBottom {
        height: 0.2083rem;
        // width: 100%;
        height: 0.2266rem;
        background: #333333;
        text-align: right;
        line-height: 0.2266rem;
        color: #999999;
        font-size: 0.0729rem;
        padding-right: 0.1302rem;
      }
    }
    .playerCebtentBoxRight {
      box-sizing: border-box;
      padding: 0.1563rem;
      flex: 1;
      background: #444;
      h1 {
        font-size: 0.125rem;
        color: #fff;
      }
      .courseCatalogue {
        margin-top: 0.0521rem;
        overflow: auto;
        height: 2.6042rem;

        &::-webkit-scrollbar {
          width: 0.026rem; /* 纵向滚动条 宽度 */
          height: 0.0781rem; /* 横向滚动条 高度 */
        }
        &::-webkit-scrollbar-thumb {
          width: 0.0521rem; /* 横向滚动条 宽度 */
          height: 0.0781rem; /* 纵向滚动条 高度 */
          background-color: rgb(167, 164, 164);
        }
        .item {
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 100%;
          height: 0.2083rem;
          color: #666;
          .tryAndSee {
            color: #43b478;
            border: 0.0052rem solid #43b478;
            display: flex;
            justify-content: center;
            flex-shrink: 0;
            align-items: center;
            font-size: 0.0625rem;
            width: 0.1875rem;
            height: 0.0885rem;
            border-radius: 0.0443rem;
          }
          .number {
            // width: 0.3125rem;
            font-size: 0.0729rem;
          }
          .title {
            font-size: 0.0781rem;
            width: 1.4583rem;
            white-space: nowrap; /* 确保文本不会换行 */
            overflow: hidden; /* 隐藏超出容器的文本 */
            text-overflow: ellipsis; /* 当文本超出容器时显示省略号 */
          }
          .time {
            font-size: 0.0781rem;
          }
          &.active {
            color: #43b478;
          }
        }
      }
    }
  }
}
</style>
